import {
  ShapeCustomizationManagementModel,
  ShapeStyleValue
} from "@/modules/model/modals/shapeCustomization/ShapeCustomizationManagementModel";
import { markRaw } from "vue";
import ColorFillComps from "@/modules/model/modals/shapeCustomization/comps/valueComps/ColorFillComps.vue";
import CheckBoxComps from "@/modules/model/modals/shapeCustomization/comps/valueComps/CheckBoxComps.vue";
import NumberInputComps from "@/modules/model/modals/shapeCustomization/comps/valueComps/NumberInputComps.vue";

export const valueCompsMap = {
  background: markRaw(ColorFillComps),
  backgroundisGradient: markRaw(CheckBoxComps),
  backgroundStartGradient: markRaw(ColorFillComps),
  backgroundEndGradient: markRaw(ColorFillComps),
  strokeColor: markRaw(ColorFillComps),
  strokeWidth: markRaw(NumberInputComps)
};

export const shapeStyleInfo: ShapeStyleValue[] = [
  {
    enName: "Background",
    enTips: "",
    key: "background",
    name: "背景色",
    value: ""
  },
  {
    enName: "Background is Gradient",
    enTips: "",
    key: "backgroundisGradient",
    name: "背景是否渐变",
    value: false
  },
  {
    enName: "Background gradient color",
    enTips: "",
    key: "backgroundStartGradient",
    name: "起始渐变色",
    value: ""
  },
  {
    enName: "Background gradient color",
    enTips: "",
    key: "backgroundEndGradient",
    name: "结束渐变色",
    value: ""
  },
  {
    enName: "Stroke Color",
    enTips: "",
    key: "strokeColor",
    name: "边框颜色",
    value: ""
  },
  {
    enName: "Stroke Width",
    enTips: "",
    key: "strokeWidth",
    name: "边框宽度",
    value: undefined
  }
];

export class ShapeStyleConfigModel {
  shapeStyleInfo = shapeStyleInfo;
  constructor(public shapeCustomizationManagementModel: ShapeCustomizationManagementModel) {}

  initShapeStyleConfig(row) {
    const background = shapeStyleInfo.find(v => v.key === "background");
    const strokeColor = shapeStyleInfo.find(v => v.key === "strokeColor");
    const strokeWidth = shapeStyleInfo.find(v => v.key === "strokeWidth");
    const backgroundisGradient = shapeStyleInfo.find(v => v.key === "backgroundisGradient");
    const backgroundStartGradient = shapeStyleInfo.find(v => v.key === "backgroundStartGradient");
    const backgroundEndGradient = shapeStyleInfo.find(v => v.key === "backgroundEndGradient");

    const reg = /^#([a-fA-F0-9]{6}|[a-fA-F0-9]{3})$/;
    if (row.background && !reg.test(row.background)) {
      const firstComma = row.background.indexOf(",");
      const lastComma = row.background.lastIndexOf(",");
      const startColor = row.background.substring(firstComma + 1, lastComma);
      const endColor = row.background.substring(lastComma + 1, row.background.length - 1);
      backgroundisGradient!.value = true;
      backgroundStartGradient!.value = startColor;
      backgroundEndGradient!.value = endColor;
    } else {
      background!.value = row.background;
    }

    strokeColor!.value = row.strokeColor;
    strokeWidth!.value = row.strokeWidth;
  }
}
